<!--
 * @Author: 260156 260156@gree.com.cn
 * @Date: 2022-08-11 16:18:27
 * @LastEditors: 260156 260156@gree.com.cn
 * @LastEditTime: 2022-08-24 14:51:28
 * @FilePath: \gree-zst-web\src\views\manage\user\components\UserMain.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by 260156 260156@gree.com.cn, All Rights Reserved. 
-->
<template>
  <my-table :tableObj="tableObj" v-loading="props.loading">
    <template #prev>
      <el-table-column type="index" label="序号" width="100" />
    </template>
    <template #default>
      <el-table-column label="操作" width="120px">
        <template #default="scope">
          <el-button type="primary" link @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button type="danger" link @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </template>
  </my-table>

  <edit-add-form
    v-model="visible"
    :formData="editFormData"
    @handleConfirm="handleConfirm"
  ></edit-add-form>
</template>
<script lang="ts" setup>
import type {
  TableHeader,
  TableData,
  TableObj,
} from "@/components/table/types";
import type { TableItem, EditForm, UpdateParams } from "../types";
import EditAddForm from "./EditAddForm.vue";
import { ElMessage } from "element-plus";
import { updateUser, deleteUser } from "api/manage/manage";
import { doApiWithMessageBox } from "utils/message";

interface Props {
  tableData: TableData;
  loading: boolean;
}
const props = defineProps<Props>();

const visible = ref<boolean>(false);

const tableHeader: TableHeader = [
  {
    label: "用户名称",
    value: "empName",
  },
  {
    label: "邮箱号",
    value: "mailNum",
  },
  {
    label: "工号",
    value: "empNum",
  },
  {
    label: "角色",
    value: "roleNameList",
  },
  {
    label: "操作人",
    value: "updater",
  },
  {
    label: "操作时间",
    value: "updateTime",
  },
];
const tableObj = computed<TableObj>(() => {
  return {
    tableData: props.tableData,
    tableHeader,
  };
});

const handleDelete = async (row: TableItem) => {
  await doApiWithMessageBox(() => deleteUser(row.id), {
    content: "确认删除该角色吗?",
  });
  emit("handleSearch");
};

// 编辑
const editFormData = ref<EditForm>();
const handleEdit = (row: TableItem) => {
  visible.value = true;
  editFormData.value = { ...row, roleId: row.roleIds[0] };
};

interface Emits {
  (e: "handleSearch"): void;
}
const emit = defineEmits<Emits>();
const handleConfirm = (formData: EditForm) => {
  const params: UpdateParams = {
    id: formData.id!,
    deptId: formData.deptId!,
    roleIds: [formData.roleId!],
    empName: formData.empName,
  };
  updateUser(params).then((res) => {
    ElMessage({
      type: "success",
      message: "修改成功",
    });
    visible.value = false;
    emit("handleSearch");
  });
};
</script>
